<template>
	<view class="container">
		<view class="tui-searchbox">
			<view class="tui-search-input">
				<icon type="search" :size='13' color='#333'></icon>
				<input confirm-type="search" placeholder="输入想要购买的商品" :focus="false" auto-focus placeholder-class="tui-input-plholder"
				 class="tui-input" v-model.trim="obj.search" @confirm="search"/>
				<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanSearch" v-show="obj.search"></icon>
			</view>
			<view class="tui-cancle" @tap="search">搜索</view>
		</view>
        
		<block v-if="flag">
			<view class="tui-search-history" v-show="historyList.length>0">
				<view class="tui-history-header">
					<view class="tui-search-title">搜索历史</view>
					<image src="../../../static/images/delete.png"  @tap="removeHistory" style="width: 30rpx;" mode="widthFix"></image>
				</view>
				<view class="tui-history-content">
					<block v-for="(item,index) in historyList" :key="index">
						<tui-tag margin="0 24rpx 24rpx 0" type="gray" shape="circle" @tap="historyTap(item.keywords)">{{item.keywords}}</tui-tag>
					</block>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="tui-product-box">
				<view class="tui-product-list">
					<block v-for="(item, index) in list" :key="index">
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @click="ProductDetail(item.id)">
							<image :src="baseUrl + item.image" class="tui-pro-img" mode="widthFix"></image>
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
								<view>
									<view class="tui-pro-price">
										<view class="tui-goods-price">
											<view class="tui-size-26">￥</view>
											<view class="tui-price-large">{{item.price}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				
				<tui-loadmore v-if="loadding" :index="3" type="green"></tui-loadmore>
				<tui-nomore v-if="nomore"></tui-nomore>
			</view>
		</block>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				baseUrl: 'https://store.yhflxh.com',
				historyList: [], //历史记录列表
				list: [],
				page: 1,
				pagesize: 10,
				obj:{
					search:'',
				},
				flag: true,
				loadding: false,
				nomore: false,
			}
		},
		onLoad(option) {
			if(option.keyword != undefined){
				this.obj.search = option.keyword
				this.search()
			}
		},
		onReady() {
			this.historyList = uni.getStorageSync('search:history');
		},
		onReachBottom() {
			this.page++;
			let data = {
				page: this.page,
				pagesize: this.pagesize,
				search: this.obj.search
			}
			this.api.GetSearchList(data).then(res =>{
				if(res.code == 1){
					this.list = [...this.list,...res.data.data]
					if(res.data.current_page < res.data.last_page ){
						this.loadding = true
						this.nomore = false
					}else{
						this.loadding = false
						this.nomore = true
					}
				}
			})
		},
		methods: {
			ProductDetail: function(id) {
				uni.navigateTo({
					url: '/pages/index/productDetail/productDetail?id=' + id
				});
			},
			search(){
				if(this.obj.search==''){
					uni.showToast({
						icon: 'none',
						title: '请输入搜索内容'
					})
					return
				}
				this.setHistory(this.obj.search);
				let data = {
					page: this.page,
					pagesize: this.pagesize,
					search: this.obj.search
				}
				this.api.GetSearchList(data).then(res =>{
					this.flag = false
					if(res.code == 1){
						this.list = res.data.data
					}
				})
			},
			setHistory(text) {
				let historyList = uni.getStorageSync('search:history');
				this.historyList = [];
				this.historyList = historyList; 
				let searchHistory = historyList;
				if (!searchHistory) searchHistory = [];
				let serachData = {};
				if (typeof text === 'string') {
					serachData = { keywords: text };
				} else {
					serachData = text;
				}
				// 判断数组是否存在，如果存在，那么将放到最前面
				for (var i = 0; i < searchHistory.length; i++) {
					if (searchHistory[i].keywords === serachData.keywords) {
						searchHistory.splice(i, 1);
						break;
					}
				}
				searchHistory.unshift(serachData);
				uni.setStorage({
					key: 'search:history',
					data: searchHistory
				});
			},
			// 清空历史数据
			removeHistory() {
				uni.showModal({
					title: '提示',
					content: '是否清空搜索历史？',
					success: res => {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorage({ key: 'search:history' });
						}
					}
				});
			},
			historyTap(keyword){
				this.obj.search = keyword
				this.search()
			},
			cleanSearch(){
				this.obj.search = ''
				this.flag = true
			},
		}
	}
</script>

<style>
	page {
		color: #333;
		background: #fff;
	}
	.container {
		box-sizing: border-box;
	}
	.tui-searchbox {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 30rpx 20rpx 30rpx;
		/* height: 120rpx; */
	}
	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}

	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}

	.tui-cancle {
		color: #888;
		font-size: 28rpx;
		padding-left: 30rpx;
		flex-shrink: 0;
	}
    .tui-search-history{
    	padding: 0 30rpx 30rpx 30rpx;
    	margin-bottom: 30rpx;
    }
	.tui-history-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}
	.tui-history-content{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.tui-search-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.tui-hot-header {
		padding: 30rpx 0;
	}
	
	.tui-product-box {
		padding: 20rpx;
		box-sizing: border-box;
		width: 750rpx;
		min-height: 100vh;
		background-color: #f7f7f7;
	}
	.tui-product-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-pro-item {
		width: 48.5%;
		margin-bottom: 20rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	
	.tui-pro-img {
		width: 100%;
		display: block;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-pro-price {
		padding-top: 18rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.tui-goods-price {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		color: #E83B3B;
	}
	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}
	
	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}
</style>